<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>程序员简历 - 张三</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.2.47/dist/vue.global.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: "Microsoft YaHei", sans-serif;
            background-color: #0f1c30;
            color: #fff;
            overflow: hidden;
        }
        .container {
            display: grid;
            grid-template-columns: 25% 50% 25%;
            grid-template-rows: 15% 70% 15%;
            height: 100vh;
            padding: 10px;
            gap: 10px;
        }
        .header {
            grid-column: 1 / 4;
            background: linear-gradient(90deg, #0f2c52, #0a1c35);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            border: 1px solid #1e3c5a;
        }
        .panel {
            background-color: rgba(16, 31, 50, 0.7);
            border-radius: 6px;
            padding: 15px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
            border: 1px solid #1e3c5a;
            overflow: auto;
        }
        .panel-title {
            font-size: 1.2em;
            margin-bottom: 15px;
            color: #4fc3f7;
            display: flex;
            align-items: center;
        }
        .panel-title::before {
            content: "";
            width: 4px;
            height: 18px;
            background: #4fc3f7;
            margin-right: 8px;
            border-radius: 2px;
        }
        .personal-info {
            grid-column: 1;
            grid-row: 2;
        }
        .main-content {
            grid-column: 2;
            grid-row: 2;
            display: flex;
            flex-direction: column;
        }
        .skills-panel {
            grid-column: 3;
            grid-row: 2;
        }
        .footer {
            grid-column: 1 / 4;
            grid-row: 3;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            background: linear-gradient(90deg, #0f2c52, #0a1c35);
            border-radius: 6px;
            border: 1px solid #1e3c5a;
        }
        .info-item {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
        }
        .icon {
            width: 20px;
            height: 20px;
            margin-right: 10px;
            color: #4fc3f7;
        }
        .chart-container {
            width: 100%;
            height: 100%;
        }
        .project-list {
            list-style: none;
            padding: 0;
        }
        .project-list li {
            padding: 8px;
            margin-bottom: 8px;
            border-left: 3px solid;
            border-radius: 3px;
            background-color: rgba(255, 255, 255, 0.05);
        }
        .project-web { border-left-color: #4fc3f7; }
        .project-mobile { border-left-color: #4caf50; }
        .project-backend { border-left-color: #ff9800; }
        .stats-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }
        .stat-card {
            background: rgba(26, 45, 67, 0.7);
            border-radius: 6px;
            padding: 15px;
            text-align: center;
        }
        .stat-value {
            font-size: 2em;
            font-weight: bold;
            margin: 10px 0;
        }
        .stat-label {
            color: #9e9e9e;
            font-size: 0.9em;
        }
        .skill-item {
            margin-bottom: 15px;
        }
        .skill-name {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
        }
        .skill-bar {
            height: 8px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
            overflow: hidden;
        }
        .skill-level {
            height: 100%;
            background: linear-gradient(90deg, #4fc3f7, #2196f3);
            border-radius: 4px;
        }
        .contact-info {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .contact-item {
            display: flex;
            align-items: center;
        }
    </style>
</head>
<body>
    <div id="app" class="container">
        <div class="header">
            <h1>程序员简历 - 张三</h1>
            <div>最后更新: {{ currentTime }}</div>
        </div>
        
        <div class="panel personal-info">
            <div class="panel-title">个人信息</div>
            <div class="info-item">
                <span class="icon">📧</span>
                <span>zhangsan@email.com</span>
            </div>
            <div class="info-item">
                <span class="icon">📱</span>
                <span>138-8888-8888</span>
            </div>
            <div class="info-item">
                <span class="icon">📍</span>
                <span>北京市海淀区</span>
            </div>
            
            <div class="panel-title" style="margin-top: 20px;">教育背景</div>
            <div class="info-item">
                <span class="icon">🎓</span>
                <span>计算机科学与技术 硕士</span>
            </div>
            <div class="info-item">
                <span class="icon">🏫</span>
                <span>清华大学 (2015-2019)</span>
            </div>
            
            <div class="panel-title" style="margin-top: 20px;">证书</div>
            <div class="info-item">
                <span class="icon">📜</span>
                <span>AWS认证解决方案架构师</span>
            </div>
            <div class="info-item">
                <span class="icon">📜</span>
                <span>PMP项目管理专业人士</span>
            </div>
        </div>
        
        <div class="panel main-content">
            <div class="panel-title">工作经验</div>
            <div class="info-item">
                <span class="icon">💼</span>
                <span><strong>高级全栈开发工程师</strong> - 某互联网科技公司 (2020-至今)</span>
            </div>
            <ul>
                <li>负责公司核心业务系统的设计与开发</li>
                <li>主导微服务架构改造，提升系统可扩展性</li>
                <li>优化数据库查询，将系统响应时间减少40%</li>
                <li>带领5人团队完成多个重要项目交付</li>
            </ul>
            
            <div class="info-item" style="margin-top: 15px;">
                <span class="icon">💼</span>
                <span><strong>前端开发工程师</strong> - 某软件公司 (2019-2020)</span>
            </div>
            <ul>
                <li>参与企业级管理平台的前端开发</li>
                <li>实现响应式设计，提升移动端用户体验</li>
                <li>开发可复用组件库，提高团队开发效率30%</li>
            </ul>
            
            <div class="panel-title" style="margin-top: 20px;">项目经验</div>
            <ul class="project-list">
                <li class="project-web">
                    <strong>电商平台重构项目</strong>
                    <p>使用Vue3+TypeScript重构前端，Node.js+Express重构后端，提升性能35%</p>
                </li>
                <li class="project-backend">
                    <strong>微服务权限管理系统</strong>
                    <p>基于Spring Cloud构建的分布式权限管理系统，支持千万级用户</p>
                </li>
                <li class="project-mobile">
                    <strong>健康监测移动应用</strong>
                    <p>React Native开发的跨平台应用，已上线App Store和Google Play</p>
                </li>
            </ul>
        </div>
        
        <div class="panel skills-panel">
            <div class="panel-title">技能分析</div>
            
            <div class="skill-item">
                <div class="skill-name">
                    <span>JavaScript/TypeScript</span>
                    <span>90%</span>
                </div>
                <div class="skill-bar">
                    <div class="skill-level" style="width: 90%;"></div>
                </div>
            </div>
            
            <div class="skill-item">
                <div class="skill-name">
                    <span>Vue/React</span>
                    <span>85%</span>
                </div>
                <div class="skill-bar">
                    <div class="skill-level" style="width: 85%;"></div>
                </div>
            </div>
            
            <div class="skill-item">
                <div class="skill-name">
                    <span>Node.js</span>
                    <span>80%</span>
                </div>
                <div class="skill-bar">
                    <div class="skill-level" style="width: 80%;"></div>
                </div>
            </div>
            
            <div class="skill-item">
                <div class="skill-name">
                    <span>Java/Spring</span>
                    <span>75%</span>
                </div>
                <div class="skill-bar">
                    <div class="skill-level" style="width: 75%;"></div>
                </div>
            </div>
            
            <div class="skill-item">
                <div class="skill-name">
                    <span>数据库设计</span>
                    <span>85%</span>
                </div>
                <div class="skill-bar">
                    <div class="skill-level" style="width: 85%;"></div>
                </div>
            </div>
            
            <div class="skill-item">
                <div class="skill-name">
                    <span>DevOps</span>
                    <span>70%</span>
                </div>
                <div class="skill-bar">
                    <div class="skill-level" style="width: 70%;"></div>
                </div>
            </div>
            
            <div class="panel-title" style="margin-top: 20px;">技术分布</div>
            <div id="tech-chart" class="chart-container"></div>
        </div>
        
        <div class="footer">
            <div>个人简历 | 张三 - 全栈开发工程师</div>
            <div>状态: <span style="color: #4caf50;">正在寻找新机会</span> | 最近活跃: {{ lastUpdate }}</div>
        </div>
    </div>

    <script>
        const { createApp, ref, onMounted } = Vue;
        
        createApp({
            setup() {
                const currentTime = ref(new Date().toLocaleString('zh-CN'));
                const lastUpdate = ref(new Date().toLocaleDateString('zh-CN'));
                
                // 更新时间
                setInterval(() => {
                    currentTime.value = new Date().toLocaleString('zh-CN');
                }, 1000);
                
                onMounted(() => {
                    // 初始化技术分布图表
                    const techChart = echarts.init(document.getElementById('tech-chart'));
                    const techOption = {
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            top: 'bottom',
                            textStyle: { color: '#fff' }
                        },
                        series: [
                            {
                                name: '技术分布',
                                type: 'pie',
                                radius: ['40%', '70%'],
                                avoidLabelOverlap: false,
                                itemStyle: {
                                    borderRadius: 10,
                                    borderColor: '#0f1c30',
                                    borderWidth: 2
                                },
                                label: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: '14',
                                        fontWeight: 'bold',
                                        color: '#fff'
                                    }
                                },
                                labelLine: {
                                    show: false
                                },
                                data: [
                                    { value: 35, name: '前端开发' },
                                    { value: 25, name: '后端开发' },
                                    { value: 20, name: '数据库' },
                                    { value: 10, name: 'DevOps' },
                                    { value: 10, name: '移动开发' }
                                ],
                                color: ['#4fc3f7', '#4caf50', '#ff9800', '#f44336', '#9c27b0']
                            }
                        ]
                    };
                    techChart.setOption(techOption);
                    
                    // 响应窗口大小变化
                    window.addEventListener('resize', function() {
                        techChart.resize();
                    });
                });
                
                return {
                    currentTime,
                    lastUpdate
                };
            }
        }).mount('#app');
    </script>
</body>
</html>